<template>
  <div>
    <el-form :model="forms" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item >
         <el-select v-model="forms.role" style="width:300px;" placeholder="选择角色" >
              <template v-for="(item,idx) in roles"  >
                  <el-option :key="idx" :label="item" :value="item"></el-option>
              </template>
          </el-select>
      </el-form-item>
			 <el-form-item >
			 <el-input v-model="forms.account" placeholder="请输入登录账号" style="width:300px;"></el-input>
      </el-form-item>
      <el-form-item  required>
            <el-select v-model="forms.provices" style="width:300px;" placeholder="选择省份"  multiple>
             <el-option v-for="province in provinceList"
                      :key="province.province"
                      :value="province.province"
                      :label="province.province">
            </el-option>
        </el-select>
      </el-form-item>
      <el-form-item  >
        <el-input v-model="forms.name" placeholder="请输入姓名" style="width:300px;"></el-input>
      </el-form-item>
      <el-form-item >
        <el-input v-model="forms.password" placeholder="请设置初始密码" style="width:300px;"></el-input>
      </el-form-item>
			
      <el-form-item v-if="forms.role=='阅卷老师'" >
				<template>
					<el-checkbox-group v-model="forms.courses" >
						<el-checkbox v-for="course in courses" :label="course.text" :key="course.text" :value="course.text"></el-checkbox>
					</el-checkbox-group>
				</template>
      </el-form-item>

      <el-form-item  prop="submit" >
        <el-button type="primary" style="width:300px" @click="submitForm('ruleForm')">新增</el-button>
      </el-form-item>


    </el-form>

  </div>

</template>
<script>
  //这里要俺需要引入，我不是一个对象
  import provinceCodeList from "../../utils/provinceCode";
	import {isvalidPhone,isvalidEmail} from '../../api/validata'
	import {user_info_create} from '../../api/api';
	import axios from	'axios'
  //定义一个全局的变量，谁用谁知道
  var validPhone=(rule, value,callback)=>{
      if (!value){
          callback(new Error('请输入电话号码'))
      }else  if (!isvalidPhone(value)){
        callback(new Error('请输入正确的11位手机号码'))
      }else {
          callback()
      }
  }
  export default {
    props:{}, 
    data() {
      return {
        provinceList: provinceCodeList,
				roles:['教辅老师','阅卷老师','管理员'],
				courses:[],
				examType:[],
				forms:{
					role:'',
					provices:[],
					password:'',
					account:'',
					courses:[]
				},
        rules: {
          provice: [
            { required: true, message: '输入省份', trigger: 'blur' },
          ],
          contact: [
            { required: true, message: '输入联系老师', trigger: 'blur' },
          ],
          phone: [
            { required: true, trigger: 'blur', validator: validPhone }//这里需要用到全局变量
          ],
          email: [
            { required: true, message: '请输入email', trigger: 'blur' },//这里需要用到全局变量
            { type: 'email', message: 'email格式错误,请输入正确的email', trigger: 'blur' }
          ]
        }
      };
		},
		mounted:function(){
			console.log(this.$store.state.exampaper)
			this.courses=this.$store.state.exampaper
			this.provinceall=provinceall
			axios.defaults.headers.common["Art-Token"] = sessionStorage.getItem('Art-Token');
		},
    methods: {

      submitForm(formName) {

        this.$refs[formName].validate((valid) => {
          if (valid) {
						user_info_create(this.forms).then((res)=>{
							console.log(res)
						})
            alert('上传成功!');//这里就是符合规则，然后去调对应的接口
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }

</script>